<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>大河网订阅管理系统</title>

	<link href="css/css.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
	<script src="js/jQuery-3.7.1.js"></script>
	<script type="text/javascript" src="js/pony.js"></script>
	<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<style>
		#user {
			font-size: 16px;
		}
	</style>

  </head>
  
  <body>

	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="30">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td height="62" background="images/nav04.gif">
							<table style="padding-left: 32px;" width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td width="21"></td>
									<td width="1400" style="padding-left: 30px;"></td>
									<td><span id="user"></span></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table id="subtree1" style="DISPLAY: " width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td>
							<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="20">
										<span class="newfont07"></span>
								<tr>
									<td height="40" class="font42">
										<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#464646" class="newfont03">
											<thead>
												<tr class="CTitle" >
													<td height="22" colspan="16" align="center" style="font-size:16px">在线用户列表</td>
												</tr>
												<tr bgcolor="#EEEEEE">
													<td align="center" height="30">账户</td>
												</tr>
											</thead>
											<tbody id="onlineTbody"></tbody>

										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
  </body>

	<script>

		// 定义函数,加载数据
		function loadData(sendData) {
			$.getJSON("online",sendData,function (result) {
				// 根据返回结果处理数据
				if (result.code == 200){
					// 定义变量表示tbody内容
					let tbodyHtml = "";
					// 遍历结果集 result中的data是onlineList集合
					// index -> 每次迭代出来的元素的索引
					// object -> 每次迭代出来的元素
					$.each(result.data,function (index,user) {
						tbodyHtml += '<tr bgcolor="white">';
						tbodyHtml += '<td align="center" height="30">' + user + '</td>';
						tbodyHtml += '</tr>'
					})
					// 将生成的html代码作为onlineTbody的内容
					$("#onlineTbody").html(tbodyHtml)
				}
				// 如果状态是302,表示应该登录,但是没有登录.跳转登录页面
				if (result.code == 302){
					window.location.href = "login.html"
				}
			})
		}

		// 页面加载完成,从服务端查询数据并填充页面
		window.onload = function () {
			loadData(null);
		}

	</script>
</html>
